<template>
  <div>
    <div class="attraction-list">
      <AttractionListItem v-for="item in attractions" :key="item.attrId" :attraction="item" />
      <el-pagination background :page-size="form.pageSize" v-show="total > 5" layout="prev, pager, next" :total="total"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>
 
<script>
import AttractionListItem from '../attractionListItem'
import { searchAttrList } from '@/api/travel';

export default {
  name: 'AttracionList',
  props: [
    'searchKey',
    'isSearch',
    'searchForm'
  ],
  created() {
    this.getAttractionList()
    console.log(this.searchForm)
  },
  computed: {
    search() {
      return this.isSearch
    }
  },
  watch: {
    search: {
      handler(newVal) {
        console.log(this.searchForm)
        console.log('search变化', newVal)
        if (newVal === true) {
          console.log('search变化')
          this.form.name = this.searchKey
          this.form.areaId = this.searchForm.areaId
          this.form.attrCateId = this.searchForm.attrCateId
          this.getAttractionList()
          this.form.name = null
          this.form.areaId = null
          this.form.attrCateId = null
          this.$emit('update:isSearch', false)
          // this.$store.commit('travel/SET_IS_SEARCH', false)
        }
      }
    }
  },
  components: {
    AttractionListItem
  },
  data() {
    return {
      form: {
        pageNum: 1,
        pageSize: 5
      },
      attractions: [],
      total: null
    }
  },
  methods: {
    async getAttractionList() {
      const res = await searchAttrList(this.form)
      console.log(res)
      if (res.code === 200) {
        const { attractions, total } = res.data
        this.attractions = attractions
        this.total = total
        console.log(this.attractions)
      } else {
        console.log('查询失败')
      }
    },
    handleCurrentChange(val) {
      this.form.pageNum = val
      this.getAttractionList()
    }
  }
}
</script>
 
<style lang="less" scoped>
.attraction-list {
  position: relative;
  min-height: 1070px;

  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #ff9d00;
    color: #FFF !important;
  }

  /deep/ .el-pager li:hover {
    color: #ff9d00 !important;
  }

  .el-pagination {
    margin-bottom: 10px;
    position: absolute;
    bottom: -4px;
  }
}

.el-form-item {
  margin-bottom: 0px;
}

/deep/ .el-form-item__label {
  padding: 1px 12px 0px 13px;
  font-size: 12px;
}
.el-radio {
  margin-right: 10px;
}

/deep/ .el-form-item__content {
  border: 1px solid #ccc;
  font-size: 12px;
}

/deep/ .el-radio__label {
  font-size: 12px;
}
</style>